<template>
  <div>
    <div class="process-group">
      <!--头部搜索工作栏-->
      <div class="header-search">
        <div class="header-left">
          <span class="fallback-span" @click="fallbackOperate">
            <svg-icon
              icon-class="fallback"
              class="svg-icon-size-three"
            ></svg-icon>
          </span>
          <span class="process-name-span">
            {{ processName }}
          </span>
        </div>
        <div class="header-right">
          <el-button
            type="success"
            style="width: 132px; margin-right: 10px"
            @click="addProcessVersion"
            ><svg-icon
              icon-class="process-create"
              class="svg-icon-size-one svg-icon-margin"
            />新建版本</el-button
          >
          <el-input
            placeholder="搜索版本名称"
            style="width: 240px"
            v-model="queryParams.name"
            @keyup.enter.native="getList"
            @blur="getList"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <!--内容工作栏-->
      <div class="main-content">
        <div class="right-table">
          <!-- 列表 -->
          <el-table ref="table" v-loading="loading" :data="list">
            <!-- <el-table-column type="selection" width="50"> </el-table-column> -->
            <el-table-column
              label="版本号"
              align="center"
              prop="versionNo"
              width="100"
            />
            <el-table-column
              align="left"
              prop="name"
              width="200"
              resizable
              show-overflow-tooltip
            >
              <template slot="header">
                <el-tooltip class="item" effect="light" placement="top-start">
                  <template slot="content">
                    <p>
                      <svg-icon
                        icon-class="form-exit"
                        class="svg-icon-size-one svg-icon-margin"
                      />已绑定表单
                    </p>
                    <p>
                      <svg-icon
                        icon-class="form-none"
                        class="svg-icon-size-one svg-icon-margin"
                      />未绑定表单
                    </p>
                  </template>
                  <span
                    ><i class="el-icon-question"></i> 流程名称
                  </span></el-tooltip
                >
              </template>
              <template slot-scope="scope">
                <svg-icon
                  :icon-class="scope.row.formId ? 'form-exit' : 'form-none'"
                  class="svg-icon-size-one svg-icon-margin"
                /><span>{{ scope.row.name || "-" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="开启状态"
              align="center"
              prop="status"
              width="150"
              resizable
              show-overflow-tooltip
            >
              <template v-slot="scope">
                <span
                  v-if="scope.row.processDefinition == null"
                  class="open-doing"
                >
                  设计中
                </span>
                <span v-else>
                  <span v-if="scope.row.status == 1" class="open-done"
                    >启用中</span
                  >
                  <span v-else class="open-do">待启用</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作用户"
              align="center"
              prop="updateUserName"
            >
            </el-table-column>
            <el-table-column
              label="更新时间"
              align="center"
              prop="updateTime"
              width="180"
            >
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.updateTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="版本描述" align="center" prop="category">
              <template v-slot="scope">
                {{ scope.row.description || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template v-slot="scope">
                <el-button
                  type="text"
                  @click="versionHandle(scope.row)"
                  v-hasPermi="['bpm:model:update']"
                  class="svg-icon-margin"
                >
                  <span v-if="scope.row.processDefinition == null">
                    <svg-icon
                      icon-class="arrange"
                      class="svg-icon-size-two"
                      style="margin-left: 10px"
                    />部署
                  </span>
                  <span v-else>
                    <span v-if="scope.row.status == 1"
                      ><svg-icon
                        icon-class="hang-up"
                        class="svg-icon-size-two"
                        style="margin-left: 10px"
                      />挂起</span
                    >
                    <span v-else
                      ><svg-icon
                        icon-class="start-using"
                        class="svg-icon-size-two"
                        style="margin-left: 10px"
                      />启用</span
                    >
                  </span>
                </el-button>
                <el-dropdown trigger="click">
                  <el-button type="text" v-hasPermi="['bpm:model:update']"
                    ><svg-icon
                      icon-class="more"
                      class="svg-icon-size-three"
                      style="margin-left: 10px"
                  /></el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-show="scope.row.processDefinition != null"
                      @click.native="handleBpmnDetail(scope.row)"
                    >
                      <span
                        ><svg-icon
                          icon-class="PC"
                          class="svg-icon-size-one"
                        />预览</span
                      ></el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="
                        scope.row.processDefinition == null ||
                        scope.row.status == 0
                      "
                      @click.native="versionEdit(scope.row)"
                    >
                      <span
                        ><svg-icon
                          icon-class="version-base-info"
                          class="svg-icon-size-one"
                        />基本信息</span
                      ></el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="
                        scope.row.processDefinition == null ||
                        scope.row.status == 0
                      "
                      @click.native="handleDesign(scope.row)"
                    >
                      <span
                        ><svg-icon
                          icon-class="model-designer"
                          class="svg-icon-size-one"
                        />模型设计</span
                      ></el-dropdown-item
                    >
                    <el-dropdown-item @click.native="handleFormInfo(scope.row)">
                      <span
                        ><svg-icon
                          icon-class="version-form-info"
                          class="svg-icon-size-one"
                        />表单信息</span
                      ></el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="handleDeploy(scope.row)"
                      v-show="
                        scope.row.processDefinition != null &&
                        scope.row.status == 0
                      "
                    >
                      <span
                        ><svg-icon
                          icon-class="arrange"
                          class="svg-icon-size-one"
                        /><span style="color: #1890ff">部署</span></span
                      ></el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="scope.row.processDefinition == null"
                      @click.native="handleDelete(scope.row)"
                    >
                      <span style="color: red"
                        ><svg-icon
                          icon-class="file-delete"
                          class="svg-icon-size-one"
                        />删除</span
                      ></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>

    <!-- 流程表单配置详情 -->
    <el-dialog
      title="表单信息"
      :visible.sync="formInfoOperate.visible"
      :width="formInfoOperate.currentOperateSteps == 3 ? '500px' : '50%'"
      append-to-body
      center
    >
      <div v-show="formInfoOperate.currentOperateSteps == 3">
        <el-form
          ref="formInfoForm"
          :model="formInfoOperate.form"
          :rules="formInfoOperate.rules"
          label-width="110px"
        >
          <el-form-item label="表单类型">
            <el-radio-group v-model="formInfoOperate.form.formType">
              <el-radio
                v-for="dict in modelFormTypeDictDatas"
                :key="parseInt(dict.value)"
                :label="parseInt(dict.value)"
              >
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="formInfoOperate.form.formType === 10"
            label="流程表单"
          >
            <el-select
              v-model="formInfoOperate.form.formId"
              clearable
              style="width: 85%"
            >
              <el-option
                v-for="form in forms"
                :key="form.id"
                :label="form.name"
                :value="form.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="formInfoOperate.form.formType === 20"
            label="表单提交路由"
            prop="formCustomCreatePath"
            key="formCustomCreatePath"
          >
            <el-input
              v-model="formInfoOperate.form.formCustomCreatePath"
              placeholder="请输入表单提交路由"
              style="width: 85%"
            />
            <el-tooltip
              class="item"
              effect="light"
              content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
              placement="top"
            >
              <i style="padding-left: 5px" class="el-icon-question" />
            </el-tooltip>
          </el-form-item>
          <el-form-item
            v-if="formInfoOperate.form.formType === 20"
            label="表单查看路由"
            prop="formCustomViewPath"
            key="formCustomViewPath"
          >
            <el-input
              v-model="formInfoOperate.form.formCustomViewPath"
              placeholder="请输入表单查看路由"
              style="width: 85%"
            />
            <el-tooltip
              class="item"
              effect="light"
              content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view"
              placement="top"
            >
              <i style="padding-left: 5px" class="el-icon-question" />
            </el-tooltip>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button @click="formInfoCancel" type="info" plain>取 消</el-button>
          <el-button type="primary" @click="formInfoSubmitForm"
            >确 认</el-button
          >
        </div>
      </div>
      <div v-show="formInfoOperate.currentOperateSteps != 3">
        <parser :key="new Date().getTime()" :form-conf="detailForm" />
        <div v-show="formInfoOperate.currentOperateSteps == 2">
          <el-button type="text" @click="changeNewForm">更换表单</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 流程模型图的预览 -->
    <el-dialog
      title="流程图"
      :visible.sync="showBpmnOpen"
      width="80%"
      append-to-body
    >
      <my-process-viewer
        key="designer"
        v-model="bpmnXML"
        v-bind="bpmnControlForm"
      />
    </el-dialog>

    <!-- 版本流程对话框(添加) -->
    <el-dialog
      :title="title"
      :visible.sync="processVersionDialog"
      width="500px"
      append-to-body
      center
    >
      <!--模拟步骤条-->
      <div class="steps-div">
        <div class="el-step-one">
          <div class="el-step__icon">
            <div
              class="el-step__icon-circle"
              :style="{
                borderColor: currentStep == 1 ? '#2A67F4' : '#A5ACB6',
              }"
            ></div>
            <div class="el-step__icon-inner">1</div>
            <svg-icon
              :icon-class="currentStep == 1 ? 'doing' : 'finished'"
              class="el-step__icon-state"
            ></svg-icon>
          </div>
          <div
            class="el-step__title"
            :style="{ color: currentStep == 1 ? '#23272E' : '#535F6E' }"
          >
            选择要复制的版本
          </div>
        </div>
        <div class="el-step-two"></div>
        <div class="el-step-three">
          <div class="el-step__icon">
            <div
              class="el-step__icon-circle"
              :style="{
                borderColor: currentStep == 1 ? '#A5ACB6' : '#2A67F4',
              }"
            ></div>
            <div class="el-step__icon-inner">2</div>
            <svg-icon
              :icon-class="currentStep == 1 ? '' : 'doing'"
              class="el-step__icon-state"
            ></svg-icon>
          </div>
          <div
            class="el-step__title"
            :style="{ color: currentStep == 1 ? '#535F6E' : '#23272E' }"
          >
            填写新版本信息
          </div>
        </div>
      </div>
      <!--步骤条下具体的内容展示-->
      <div v-if="currentStep == 1">
        <div class="steps-content">
          <el-table
            ref="tableChild"
            :data="noPageList"
            @current-change="handleSelectionChange"
            border
          >
            <el-table-column label="" align="center" width="60">
              <template slot-scope="scope">
                <el-radio
                  v-model="tableRadioSelected"
                  :label="scope.row.modelId"
                  ><span></span
                ></el-radio>
              </template>
            </el-table-column>
            <el-table-column label="版本名称" align="center" prop="name" />
            <el-table-column
              label="版本号"
              align="center"
              prop="versionNo"
              width="60"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else>
        <el-form
          ref="versionForm"
          :model="versionOperate.form"
          :rules="versionOperate.rules"
          label-width="110px"
        >
          <el-form-item label="版本名称" prop="name">
            <el-input
              v-model="versionOperate.form.name"
              placeholder="请输入版本名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="版本描述" prop="description">
            <el-input
              type="textarea"
              v-model="versionOperate.form.description"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="versionCancel" type="info" plain>取 消</el-button>
        <el-button
          type="primary"
          @click="continueStep"
          v-if="currentStep == 1"
          :disabled="tableRadioSelected == '' ? true : false"
          >继 续</el-button
        >
        <el-button type="primary" @click="versionSubmitForm" v-else
          >确 认</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="基本信息"
      :visible.sync="versionEditOperate.visible"
      width="500px"
      append-to-body
      center
    >
      <el-form
        ref="versionEditForm"
        :model="versionEditOperate.form"
        :rules="versionEditOperate.rules"
        label-width="110px"
      >
        <el-form-item label="版本名称" prop="name">
          <el-input
            v-model="versionEditOperate.form.name"
            placeholder="请输入版本名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="版本描述" prop="description">
          <el-input
            type="textarea"
            v-model="versionEditOperate.form.description"
            clearable
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="versionEditCancel" type="info" plain
          >取 消</el-button
        >
        <el-button type="primary" @click="versionEditSubmitForm"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deployModel, getModel } from "@/api/bpm/model";
import {
  queryVersionPageList,
  queryVersionList,
  createVersion,
  saveBaseInfo,
  formBinding,
  versionDelete,
  switchOperateState,
} from "@/api/bpm/processGroup";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import { getForm, getAllOpenForms } from "@/api/bpm/form";
import { decodeFields } from "@/utils/formGenerator";
import Parser from "@/components/parser";
import { getBaseHeader } from "@/utils/request";
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "model",
  components: {
    Parser,
    Treeselect,
    taskAssignRuleDialog,
  },
  data() {
    return {
      currentStep: 1, //新建流程版本时，用来记录当前操作的是哪一步骤
      active: 1,
      processName: "流程版本",
      currentOperateState: 2, //1表示挂起，2表示启用，3表示部署
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        modelInfoId: "", //流程模型id
      },

      // BPMN 数据
      showBpmnOpen: false,
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },

      // 流程表单详情
      detailOpen: false,
      detailForm: {
        fields: [],
      },

      // 流程表单
      title: "",
      open: false,
      form: {},
      // 表单校验
      rules: {
        key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
        name: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
        ],
        formType: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
        ],
        formId: [
          { required: true, message: "业务表单不能为空", trigger: "blur" },
        ],
        category: [
          { required: true, message: "流程分类不能为空", trigger: "blur" },
        ],
        formCustomCreatePath: [
          { required: true, message: "表单提交路由不能为空", trigger: "blur" },
        ],
        formCustomViewPath: [
          { required: true, message: "表单查看路由不能为空", trigger: "blur" },
        ],
      },

      // 流程导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: getBaseHeader(),
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin-api" + "/bpm/model/import",
        // 表单
        form: {},
        // 校验规则
        rules: {
          key: [
            { required: true, message: "流程标识不能为空", trigger: "blur" },
          ],
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
          ],
        },
      },
      // 流程表单的下拉框的数据
      forms: [],

      // 数据字典
      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
      taskAssignRuleDictDatas: getDictDatas(
        DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE
      ),
      //新建流程版本弹出框
      processVersionDialog: false,
      tableRadioSelected: "",
      //无分页的版本列表数据
      noPageList: [],
      //新建版本时，选择要复制的版本
      copy: {
        selected: "",
      },
      versionOperate: {
        form: {
          name: "",
        },
        // 校验规则
        rules: {
          name: [
            { required: true, message: "版本名称不能为空", trigger: "blur" },
          ],
        },
      },
      //基本信息
      versionEditOperate: {
        modelId: "",
        visible: false,
        form: { name: "", description: "" },
        // 校验规则
        rules: {
          name: [
            { required: true, message: "版本名称不能为空", trigger: "blur" },
          ],
        },
      },
      //表单创建及编辑的相关信息
      formInfoOperate: {
        modelId: "",
        visible: false,
        currentOperateSteps: null, ////1表示挂起，2表示启用，3表示部署
        form: {},
        rules: {
          formType: [
            { required: true, message: "表单类型不能为空", trigger: "blur" },
          ],
          formId: [
            { required: true, message: "业务表单不能为空", trigger: "blur" },
          ],
          formCustomCreatePath: [
            {
              required: true,
              message: "表单提交路由不能为空",
              trigger: "blur",
            },
          ],
          formCustomViewPath: [
            {
              required: true,
              message: "表单查看路由不能为空",
              trigger: "blur",
            },
          ],
        },
      },
    };
  },
  watch: {},
  created() {
    //获取流程id
    this.queryParams.modelInfoId = this.$route.query.modelId;
    //获取无分页的版本数据
    //this.queryVersionList();
    this.getList();
    // 获得流程表单的下拉框的数据
    getAllOpenForms().then((response) => {
      this.forms = response.data;
    });
  },
  methods: {
    queryVersionList() {
      queryVersionList(this.queryParams.modelInfoId).then((res) => {
        this.noPageList = res.data;
        console.log("!!!@:", this.noPageList);
      });
    },
    //继续下一步
    continueStep() {
      this.currentStep = 2;
    },
    //新建流程版本
    addProcessVersion() {
      this.processVersionDialog = true;
      this.title = "创建新的版本流程";
      //新建版本之前，更新下能引用的版本
      this.queryVersionList();
    },
    //返回操作
    fallbackOperate() {
      this.$router.push({
        path: "/bpm/manager/model",
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 查询流程模型列表 */
    getList() {
      this.loading = true;
      queryVersionPageList(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        key: undefined,
        name: undefined,
        description: undefined,
        category: undefined,
        formType: undefined,
        formId: undefined,
        formCustomCreatePath: undefined,
        formCustomViewPath: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 设计按钮操作 */
    handleDesign(row) {
      this.$router.push({
        path: "/bpm/manager/model/design",
        query: {
          modelId: row.id,
          processModelId: this.queryParams.modelInfoId,
        },
      });
    },
    /**基本信息 */
    versionEdit(row) {
      this.versionEditOperate.visible = true;
      this.versionEditOperate.form.name = row.name;
      this.versionEditOperate.form.description = row.description;
      this.versionEditOperate.modelId = row.id;
    },
    /**表单信息 */
    handleFormInfo(row) {
      this.formInfoOperate.modelId = row.id;
      //当表单id存在时，说明此时的状态时挂起或者启用
      if (row.formId) {
        getForm(row.formId).then((response) => {
          // 设置值
          const data = response.data;
          this.detailForm = {
            ...JSON.parse(data.conf),
            fields: decodeFields(data.fields),
          };
        });
        this.formInfoOperate.currentOperateSteps = row.status == 1 ? 1 : 2;
        // 业务表单
      } else if (row.formCustomCreatePath) {
        this.$router.push({ path: row.formCustomCreatePath });
      } else {
        //表单不存在时，那就表示当前状态时部署，需要去绑定表单
        this.formInfoOperate.currentOperateSteps = 3;
      }
      this.formInfoOperate.visible = true;
    },
    /**更换或新建表单 */
    changeNewForm() {
      this.formInfoOperate.currentOperateSteps = 3;
    },
    formInfoSubmitForm() {
      this.$refs["formInfoForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = this.formInfoOperate.form;
        params.id = this.formInfoOperate.modelId;
        formBinding(params).then((res) => {
          this.$message.success("绑定成功");
          this.formInfoCancel();
        });
      });
    },
    formInfoCancel() {
      this.$refs["formInfoForm"].resetFields();
      this.formInfoOperate.form = {};
      this.formInfoOperate.visible = false;
      this.formInfoOperate.modelId = "";
      this.getList();
    },
    /**新建版本 */
    versionSubmitForm() {
      this.$refs["versionForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = this.versionOperate.form;
        params.sourceModelId = this.copy.selected;
        createVersion(params).then((res) => {
          this.$message.success("新建成功");
          this.versionCancel();
        });
      });
    },
    versionCancel() {
      this.currentStep = 1;
      this.tableRadioSelected = "";
      this.versionOperate.form = { name: "" };
      this.processVersionDialog = false;
      this.$refs["versionForm"].resetFields();
      this.getList();
    },
    versionEditSubmitForm() {
      this.$refs["versionEditForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = this.versionEditOperate.form;
        params.id = this.versionEditOperate.modelId;
        saveBaseInfo(params).then((res) => {
          this.$message.success("保存成功");
          this.versionEditCancel();
        });
      });
    },
    versionEditCancel() {
      this.versionEditOperate.form = { name: "", description: "" };
      this.versionEditOperate.modelId = "";
      this.versionEditOperate.visible = false;
      this.getList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const that = this;
      this.$modal
        .confirm("是否删除该流程！！")
        .then(function () {
          versionDelete(row.id).then((response) => {
            that.getList();
            that.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    /**部署、挂起、启用 */
    versionHandle(row) {
      //部署
      if (row.processDefinition == null) {
        this.handleDeploy(row);
      }
      //启用或停用
      else {
        let params = {};
        params.modelId = row.id;
        //当前状态是0或者空的时候，传递的参数都是1
        params.status = row.status == 1 ? 0 : 1;
        switchOperateState(params).then((res) => {
          this.getList();
          this.$modal.msgSuccess("切换成功");
        });
      }
    },
    /** 部署按钮操作 */
    handleDeploy(row) {
      const that = this;
      this.$modal
        .confirm("是否部署该流程！！")
        .then(function () {
          deployModel(row.id).then((response) => {
            that.getList();
            that.$modal.msgSuccess("部署成功");
          });
        })
        .catch(() => {});
    },
    /** 流程表单的详情按钮操作 */
    handleFormDetail(row) {
      // 流程表单
      if (row.formId) {
        getForm(row.formId).then((response) => {
          // 设置值
          const data = response.data;
          this.detailForm = {
            ...JSON.parse(data.conf),
            fields: decodeFields(data.fields),
          };
          // 弹窗打开
          this.detailOpen = true;
        });
        // 业务表单
      } else if (row.formCustomCreatePath) {
        this.$router.push({ path: row.formCustomCreatePath });
      }
    },
    /** 流程图的详情按钮操作 */
    handleBpmnDetail(row) {
      getModel(row.id).then((response) => {
        this.bpmnXML = response.data.bpmnXml;
        // 弹窗打开
        this.showBpmnOpen = true;
      });
    },
    handleSelectionChange(currentRow, oldRow) {
      this.tableRadioSelected = currentRow.modelId;
      this.copy.selected = currentRow.modelId;
    },
  },
};
</script>

<style lang="scss" scoped>
.my-process-designer {
  height: calc(100vh - 200px);
}
.process-group {
  height: 100vh;
  margin: 0 16px;
  .header-search {
    height: 56px;
    display: flex;
    align-items: center;
    .header-left {
      width: 20%;
      height: 32px;
      display: flex;
      align-items: center;
      .fallback-span {
        display: inline-block;
        width: 32px;
        cursor: pointer;
      }
      .process-name-span {
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #23272e;
      }
    }
    .header-right {
      flex: 1;
      text-align: right;
    }
  }
  .main-content {
    height: calc(100vh - 56px);
    display: flex;
    .left-tree {
      position: relative;
      width: 220px;
      padding: 0 8px;
      box-sizing: border-box;
      border: 1px solid;
      display: flex;
      flex-direction: column;
      .process-group-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 8px;
        position: relative;
        &:nth-child(1) {
          font-size: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 600;
          color: #23272e;
        }
        .process-sort-icon {
          font-size: 20px;
          position: absolute;
          right: 0;
          top: 9px;
        }
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        .el-icon-plus:before {
          color: #b8bec7;
        }
        .el-icon-delete:before {
          color: #b8bec7;
          margin-left: 4px;
        }
      }
      .create-root-name {
        position: absolute;
        bottom: 12px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        width: 90%;
        background: #f6f7f8;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #e3e5e8;
        :nth-child(2) {
          margin-left: 8px;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
    .right-table {
      flex: 1;
    }
  }
}
.svg-icon-size-one {
  font-size: 16px;
}
.svg-icon-size-two {
  font-size: 20px;
}
.svg-icon-size-three {
  font-size: 24px;
}
.svg-icon-margin {
  margin-right: 10px;
}
.steps-div {
  height: 54px;
  margin: 0 12px;
  display: flex;
  align-items: center;
  .el-step-one {
    display: flex;
    height: 54px;
    align-items: center;
    width: 150px;
  }

  .el-step-two {
    flex: 1;
    height: 2px;
    background: #e2e5e9;
  }
  .el-step-three {
    width: 128px;
    display: flex;
    height: 54px;
    align-items: center;
  }
  .el-step__icon {
    width: 28px;
    height: 28px;
    position: relative;
    .el-step__icon-circle {
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 14px;
      border: 2px solid #2a67f4;
    }
    .el-step__icon-inner {
      position: absolute;
      font-size: 12px;
      font-weight: bold;
      color: #23272e;
    }
    .el-step__icon-state {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .el-step__title {
    font-size: 14px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #535f6e;
  }
}
.steps-content {
  height: 300px;
  padding: 14px;
  border-top: 1px solid #e8eaed;
  overflow-y: auto;
  .circle-unselected {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 14px 14px 14px 14px;
    opacity: 1;
    border: 2px solid #e3e5e8;
  }
  .circle-selected {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #0047ea;
    border-radius: 14px;
  }
}
.open-doing::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  background: #ffa229;
}
.open-done::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  background: #30bb2f;
}
.open-do::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  background: #b8bec7;
}
.open-doing,
.open-done,
.open-do {
  display: inline-block;
  border-radius: 2px;
  padding: 3px 12px;
  border: 1px solid #e3e5e8;
}
</style>
